<template>
	<contents
		:heightInclude="['tabBar']"
		class="order_list_page"
		:nullData="orderListTotal.length === 0"
		:nullText="$t('locales.notOrder')"
		nullImg="../../../static/images/null_order.png"
	>
		<view class="tab_box">
			<u-tabs
				:offset="offset"
				:list="tabList"
				:is-scroll="false"
				:current="current"
				@change="tabChange"
			></u-tabs>
		</view>
		<view class="block"></view>
		<OrderItem v-for="item in orderListTotal" :key="item.id" :value="item" />
	</contents>
</template>

<script>
import { orderTypeNum, orderList } from '@/api/http/order'
import OrderItem from '@/components/orderItem'
export default {
	components: {
		OrderItem
	},
	data() {
		return {
			offset: [5,0],
			tabList: [
				{
					name: this.$t('locales.whole')
				},
				{
					name: this.$t('locales.pendingPayment'),
					count: 0
				},
				{
					name: this.$t('locales.toBeShipped'),
					count: 0
				},
				{
					name: this.$t('locales.goodsToBeReceived'),
					count: 0
				},
				{
					name: this.$t('locales.refund'),
					count: 0
				}
			],
			current: 0,
			orderListTotal: [],
			pageNo: 1
		}
	},
	onLoad(opt) {
		if (opt.type) this.current = opt.type
	},
	onShow() {
		this.getData()
	},
	onPullDownRefresh() {
		this.getData()
		uni.stopPullDownRefresh()
	},
	onReachBottom() {
		this.pageNo += 1
		this.getData(this.pageNo)
	},
	methods: {
		tabChange(index) {
			this.current = index
			this.pageNo = 1
			this.getData()
		},
		async getData(pageNo = 1) {
			await orderTypeNum({
				domainPrefix: this.$store.getters.domainPrefix || ''
			}).then(res => {
				const data = res.data || {}
				if (res.code === 200) {
					this.tabList[1].count = data.stayPaymentNum || 0
					this.tabList[2].count = data.stayDeliveryNum || 0
					this.tabList[3].count = data.stayReceivingNum || 0
					this.tabList[4].count = data.stayCancelNum || 0
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			})
			orderList({
				pageNo,
				pageSize: 10,
				orderStatus: this.current == 4 ? -1 : this.current,
				domainPrefix: this.$store.getters.domainPrefix || ''
			}).then(res => {
				if (res.code === 200) {
					let data = res.data.records
					if (pageNo !== 1) {
						this.orderListTotal.concat(data)
					} else {
						this.orderListTotal = data	
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.order_list_page {
	.tab_box {
		position: fixed;
		width: 100%;
		left: 0;
		z-index: 99;

		// 仅出现在 ** 平台下的代码
		/* #ifdef APP-PLUS || MP-WEIXIN */
		top: 0;
		/* #endif */

		/* #ifdef H5 */
		top: calc(44px + env(safe-area-inset-top));
		/* #endif */
	}
	.block {
		width: 100%;
		height: 80rpx;
	}
}
</style>
